<!--
  @dauthor : cpucode
  @date : 2021/2/20
  @time : 11:36
  @github : https://github.com/CPU-Code
  @csdn : https://blog.csdn.net/qq_44226094
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
    <script src="../../../../../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--使用定义好的全局组件-->
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>

    <script>
        //定义组件
        const counter = {
            template: "<button @click='num++'> 你点击了{{num}}次 </button>",
            data(){
                return {num: 0}
            }
        };

        //全局注册组件；参数1：组件名称，参数2：组件
        Vue.component("counter", counter);

        let app = new Vue({
            el:"#app"
        });
    </script>
</body>
</html>